<template>
  <div>

    <el-row :gutter="10" >

      <el-col :span="8">
        <el-card style="height: 150px">
          <!--时间-->
          <LunarSolar></LunarSolar>
        </el-card>
      </el-col>


      <el-col :span="8">
        <el-card style="height: 150px">
          <div slot="header">
            <span>历史上的今天</span>
          </div>

          <!--历史上的今天-->
          <HistoryToday></HistoryToday>
        </el-card>
      </el-col>

      <el-col :span="8">
        <!--天气-->
        <Wetter></Wetter>
      </el-col>

    </el-row>


    <el-row :gutter="10"  class="div-list-style">
      <el-col :span="8">
        <!--计划统计-->
        <PlanStatistics/>
      </el-col>
      <el-col :span="16">
        <!--快捷方式-->
        <Shortcut/>
      </el-col>
    </el-row>


    <el-row :gutter="10"  class="div-list-style">

      <el-col :span="8">
        <el-card>
          <!--生日提醒-->
          <ComingBirthday />
        </el-card>
      </el-col>

      <el-col :span="16">
        <!--月度统计-->
        <el-card>
          <GeneralLedger />
        </el-card>
      </el-col>

    </el-row>

    <!--<el-row :gutter="10"  class="div-list-style">-->
    <!--  <el-col :span="24">-->
    <!--暂时不考虑放出来，这个统计导致首页有点丑。后面可以考虑放到全部的收藏的统计页面中-->
    <!--    &lt;!&ndash;统计&ndash;&gt;-->
    <!--    <DataStatistic/>-->
    <!--  </el-col>-->
    <!--</el-row>-->


    <el-row :gutter="10"  class="div-list-style">

      <el-col :span="24">
        <!--任务信息-->
        <PlanningCalendar/>
      </el-col>

    </el-row>




  </div>
</template>

<script>

  import http from '@/utils/http'
  import LunarSolar from '@/components/common/LunarSolar.vue'
  import Wetter from '@/components/common/Wetter.vue'
  import HistoryToday from '@/components/home/HistoryToday.vue'
  import ComingBirthday from '@/components/home/ComingBirthday.vue'
  import GeneralLedger from '@/components/home/GeneralLedger.vue'
  import Shortcut from '@/components/home/Shortcut.vue'
  import PlanningCalendar from '@/components/home/PlanningCalendar.vue'
  import PlanStatistics from '@/components/home/PlanStatistics.vue'
  import DataStatistic from '@/components/home/DataStatistic.vue'


  export default {
    // 首页
    name: "Index",
    components: {
      LunarSolar,
      Wetter,
      HistoryToday,
      ComingBirthday,
      GeneralLedger,
      Shortcut,
      PlanningCalendar,
      PlanStatistics,
      DataStatistic,
    },
    data(){
      return {

      }
    },
    methods: {
      /**
       * 打开高德地图
       */
      openGaoDe(){
        // this.$refs.gaoDeRef.openGaoDePage('', "")
        this.$refs.GaoDeMapSelectCoordinatesRef.openGaoDePage('', "")
      }
    },
    mounted(){
      this.$store.commit('navigationListChange', [''])
    },
  }
</script>

<style scoped>

  /*让card进行浮动*/
  .el-row {
    display: flex;
    flex-wrap: wrap
  }

  .div-list-style {
    margin-top: 10px;
  }

  .containerInterval {
    margin-top: 10px;
  }



</style>
